<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>test1</title>
		<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
		<script src="https://cdn.bootcss.com/jquery-easing/1.4.1/jquery.easing.js"></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("#box").animate({height:"300px"},100,'linear');
				});
				
				$("#btn2").click(function(){
					$("#box").animate({height:"100px"},1000,'swing')
				});
				
				$("#btn3").click(function(){
					$("#box").animate({ top: 500, opacity: 1  },1000,'easeOutBounce')
				});
			})
		</script>
	</head>
	<body>
		<button id="btn1">Animate height</button>
		
		<button id="btn2">Reset height</button>
		
		<button id="btn3">easeOutBounce</button>
		
		<div id="box" style="background: #F0AD4E;height: 100px;width: 100px;margin: 6px;"></div>
		
		
		`.animate(properties[,duration][,easing][,easing][,complete])`
	</body>
</html>
